<template>
    <div id="goods_list">

        <HeaderStatus></HeaderStatus>
        

         <div class="mui-content" id="goods_list_reset">
           <scroller 
            :on-refresh="refresh"
            :on-infinite="infinite">
            <!-- content goes here -->
            <div class="goods_list">
                <div class="item" v-for="(i,k) in goods_list" :key='k' @tap="open_detail(i.goodsid)">
                    <img :src="i.pic" alt="">
                    <div class="title" >{{i.name}}</div>
                    <div class="price">
                        <span>￥{{i.min_price.toFixed(2)}}元</span>

                    </div>
                </div>
            </div>
            </scroller>
        </div>



    </div>
</template>
<script>
import HeaderStatus from "../../components/Header";
import goods_ajax from "../../ajax/goods_ajax";
import util from "../../tools/util";
export default {
  name: "goods_list",
  components: {
    HeaderStatus
  },
  data() {
    return {
      goods_list: [],
      header_text: "",
      page_num:1
    };
  },
  methods: {
    refresh() {},
    infinite(done) {
      goods_ajax.get_normal_goods_list(
        {
          bid: this.$store.state.account.community.sqid,
          type: 2,
          page: this.page_num
        },
        res => {
          if (res.length > 0) {
            if(this.page_num==1){
              this.goods_list = res;
            }else{
              this.goods_list = this.goods_list.concat(res)
            }
           
            this.page_num++;
            done(false)
          }else{
            done(true)
          }
        }
      );
    },
    open_detail(goodsid) {
      this.$router.push("/shop/goods_list/goods?goodsid=" + goodsid);
    },
    goods_data_init() {
      
    },
    get_goods_class_list() {}
  },
  created() {
    let type = util.query_url("type");

    if (type == "youxiangtemai") {
      this.header_text = this.$store.state.common.shop_home_chanel_names[0].title;
      this.goods_data_init();
    } else {
      this.header_text = "商品列表";
      let tid = util.query_url("tid");
      console.log("++++++" + tid);

      // 初始化分类商品数据
      goods_ajax.get_class_goods_list(
        {
          bid: this.$store.state.account.community.sqid,
          tid: tid
        },
        res => {
          console.log(res);
          this.goods_list = res;
        }
      );
    }

    // 接收到参数后再初始化头部
    this.$store.commit("change_header", {
      header_text: this.header_text,
      header_right_func: false,
      header_right_html: "<span></span>",
      header_back_btn: true
    });
  },
  mounted() {
    //     mui.init({
    //       pullRefresh: {
    //         container: "#goods_list_reset", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
    //         down: {
    //           style: "circle", //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
    //           color: "#2BD009", //可选，默认“#2BD009” 下拉刷新控件颜色
    //           height: "50px", //可选,默认50px.下拉刷新控件的高度,
    //           range: "100px", //可选 默认100px,控件可下拉拖拽的范围
    //           offset: "0px", //可选 默认0px,下拉刷新控件的起始位置
    //           auto: true, //可选,默认false.首次加载自动上拉刷新一次
    //           callback: pullfresh_function //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
    //         }
    //       }
    //     });
  }
};

function pullfresh_function() {
  setTimeout(() => {
    mui.toast("已刷新");
    mui("#goods_list_reset")
      .pullRefresh()
      .endPulldown();
  }, 500);
}
</script>
<style lang="less" scoped>
body,
html,
.mui-content {
  font-family: "微软雅黑";
  background-color: #ffffff;
  padding-bottom: 2.1333rem;
  padding-top: 44px;
}
.mui-content {
  margin-top: 44px;
  padding-top: 0;
}
.mui-pull-top-pocket {
  top: 30px;
}
.mui-bar {
  border-bottom: 1px solid #c5c5c5;
}
.mui-bar .mui-segmented-control {
  top: 0;
}
.mui-segmented-control.mui-scroll-wrapper {
  height: 44px;
}
.mui-segmented-control.mui-scroll-wrapper .mui-scroll {
  height: 44px;
}
.mui-scroll-wrapper {
  top: 30px;
}
.mui-action-back {
  height: 44px;
  width: 44px;
}
.mui-action-back img {
  width: 100%;
}
.mui-title {
  height: 44px;
}
.nav {
  width: 1000px;
}
.fr {
  float: right;
}
.fl {
  float: left;
}
.mui-bar {
  top: 0.8533rem;
  font-size: 0.7253rem;
}
.hr_20 {
  height: 0.4267rem;
  background-color: #f6f6f6;
}
.ptsp_top_stats {
  height: 0.9387rem;
  width: 100%;
  z-index: 20;
  background-color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
}
.mui-title span {
  margin-left: 0.8533rem;
  display: inline-block;
  height: 44px;
  color: #888888;
  border-bottom: 4px solid transparent;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* Firefox */
  -webkit-box-sizing: border-box;
  /* Safari */
}
.mui-title span.ptsp_active {
  color: #1c83fc;
  border-bottom: 3px solid #1c83fc;
}
.goods_list {
  padding: 0.384rem;
  overflow: hidden;
}
.goods_list .item {
  width: 7.424rem;
  height: 11.6053rem;
  box-sizing: border-box;
  box-shadow: 0 0 5px #aaa;
  float: left;
}
.goods_list .item img {
  width: 100%;
  height: 7.4667rem;
}
.goods_list .item .title {
  padding: 0.4267rem;
  padding-bottom: 0;
  line-height: 0.6827rem;
  font-size: 0.512rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.goods_list .item .price {
  padding: 0.4267rem;
}
.goods_list .item .price span {
  font-size: 0.6827rem;
  color: #1c83fc;
}
.goods_list .item .price i {
  width: 1.3653rem;
  height: 1.3653rem;
  float: right;
}
.goods_list .item .price i img {
  vertical-align: middle;
  width: 100%;
  height: 100%;
}
.goods_list .item:nth-child(odd) {
  margin-right: 0.384rem;
  margin-bottom: 0.384rem;
}
</style>

